<style lang="less">
@import './upload.less';
</style>
<template>
	<div>
		<div
			class="demo-upload-list"
			:style="{ width: uploadConfig.Width || '100px', height: uploadConfig.Height || '100px', lineHeight: uploadConfig.Height || '100px' }"
			:key="index"
			v-for="(item, index) in uploadList"
		>
			<template v-if="item.status === 'finished'">
				<img :src="item.url" />
				<div class="demo-upload-list-cover" v-show="uploadConfig.disabled != true">
					<Icon type="ios-eye-outline" @click.native="handleView(item)"></Icon>
					<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
				</div>
			</template>
			<template v-else>
				<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
			</template>
		</div>
		<Upload
			v-show="btnShow"
			ref="upload"
			:show-upload-list="false"
			:on-success="handleSuccess"
			:format="['jpg', 'jpeg', 'png']"
			:max-size="uploadConfig.maxSize"
			:on-format-error="handleFormatError"
			:on-exceeded-size="handleMaxSize"
			:before-upload="handleBeforeUpload"
			:on-error="handleError"
			:disabled="uploadConfig.disabled"
			multiple
			type="drag"
			:action="uploadConfig.api"
			:headers="uploadConfig.headers"
			:style="{ display: 'inline-block', width: uploadConfig.Width || '100px' }"
		>
			<div :style="{ width: uploadConfig.Width || '100px', height: uploadConfig.Height || '100px', lineHeight: uploadConfig.Height || '100px' }">
				<Icon type="md-images" size="32"></Icon>
			</div>
		</Upload>
		<Modal title="预览图标" v-model="visible">
			<img :src="imgUrl" v-if="visible" :style="{ width: uploadConfig.Width || '100px' }" />
		</Modal>
	</div>
</template>

<script>
import { getToken, getBaseUrl } from '@/libs/util.js';
export default {
	props: {
		uploadConfig: {
			type: Object,
			default: function() {
				return {
					Width: '100px',
					Height: '100px',
					lineHeight: '100px',
					maxSize: 2048,
					api: '',
					headers: {}
				};
			}
		},
		defaultList: {
			type: Array,
			default: function() {
				return [];
			}
		}
	},
	data() {
		return {
			imgUrl: '',
			btnShow: true,
			visible: false,
			uploadList: []
		};
	},
	methods: {
		handleView(file) {
			this.imgName = file.originalName;
			this.imgUrl = file.url;
			this.visible = true;
		},
		handleRemove(file) {
			const fileList = this.uploadList;
			this.uploadList.splice(fileList.indexOf(file), 1);
			this.btnShow = true;
			this.$emit('getUploadList', this.uploadList);
		},
		handleSuccess(res, file) {
			var data = res;
			file.url = data.url;
			file.name = data.name;
			file.path = data.path;
			this.uploadList.push(file);
			this.$emit('getUploadList', this.uploadList);
		},
		handleError(error, file) {
			this.$Notice.warning({
				title: '很抱歉，上传失败',
				desc: file.message
			});
			this.btnShow = true;
		},
		handleFormatError(file) {
			this.$Notice.warning({
				title: '很抱歉，上传文件格式有误',
				desc: '仅支持png、jpg、jpeg格式'
			});
			this.btnShow = true;
		},
		handleMaxSize(file) {
			this.$Notice.warning({
				title: '很抱歉，上传文件超出限制',
				desc: '请上传小于2M的图片'
			});
			this.btnShow = true;
		},
		handleBeforeUpload() {
			const check = this.uploadList.length < 2;
			if (!check) {
				this.$Notice.warning({
					title: '上传文件数量超出限制'
				});
			}
			this.btnShow = false;
			return check;
		}
	},
	watch: {
		defaultList(data) {
			if (data.length > 0) {
				this.btnShow = false;
			}
			this.uploadList = data;
		}
	},
	mounted() {
		this.uploadConfig['headers'] = { authorization: 'Bearer ' + getToken() };
		this.uploadConfig['api'] = getBaseUrl() + '/' + this.uploadConfig.api;
	}
};
</script>

<style></style>
